<template>
  <div>
    <div class="top">
      <div style="margin-left: 765px;margin-top:12px">搜索：<el-input placeholder="请输入客户名" suffix-icon="el-icon-search" style="width: 180px"></el-input></div>
    </div>
    <div class="tab">
      <el-table ref="multipleTable" :data="tableData" style="width: 100%" height="420">
        <!--          复选框列-->
        <el-table-column fixed type="selection" width="55">

        </el-table-column>
        <el-table-column fixed prop="" label="客户编号">

        </el-table-column>
        <el-table-column fixed prop="name" label="客户名称" width="120">

        </el-table-column>
        <el-table-column prop="" label="客户联系人" width="120">

        </el-table-column>
        <el-table-column prop="" label="联系电话" width="120">

        </el-table-column>
        <el-table-column prop="" label="负责人" width="120">

        </el-table-column>
        <el-table-column prop="address" label="客户地址" width="230">

        </el-table-column>
        <el-table-column prop="" label="客户类型" width="120">

        </el-table-column>
        <el-table-column label="创建日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="" label="更新时间" width="120">

        </el-table-column>
        <el-table-column prop="" label="操作" width="120">
          <a href="" title="编辑">
            <i class="el-icon-edit"></i>
          </a>
          <a href="" title="视图">
            <i class="el-icon-tickets"></i>
          </a>
        </el-table-column>
      </el-table>

      <!--      分页-->
      <div class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="80">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerChi',
  data: function () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      // 分页
      totalSize: 0, //     当前页
      currPage: 1, //     默认第一页
      pageSize: 5 //      页大小
    }
  }
}
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white
  }

  .tab{
    border: 1px solid #D3DCE6;
    padding-bottom: 55px;
    background: white;
  }

  .page{
    margin-top:10px;
    float: right;
    margin-right: 20px;
  }
</style>
